<script setup lang="ts">
import type { ForgetPasswordInformationProps } from '@croco/framework/libraries';

import { VPasswordStrength } from '@croco/framework/libraries';
import { $t } from '@croco/framework/locales';

defineOptions({ name: 'ForgetPasswordForm' });

defineProps<{
    active: number;
    rules: {};
}>();

const emit = defineEmits<{ send: [ForgetPasswordInformationProps] }>();

const forgetPasswordFormRef = ref();
const form = defineModel<ForgetPasswordInformationProps>({
    default: {
        email: undefined,
        code: undefined,
        password: undefined,
    },
});
const disabled = ref(false);
const time = ref(0);

const handleSend = async () => {
    forgetPasswordFormRef.value
        .validateField('email')
        .then((validate: boolean) => {
            if (validate) {
                emit('send', form.value);
                disabled.value = true;
                time.value = 60;
                const timer = setInterval(() => {
                    time.value -= 1;
                    if (time.value < 1) {
                        clearInterval(timer);
                        disabled.value = false;
                        time.value = 0;
                    }
                }, 1000);
            }
        })
        .catch(() => {});
};

defineExpose({
    validate: (validate: (status: boolean) => void) => forgetPasswordFormRef.value.validate(validate),
});
</script>

<template>
    <el-form ref="forgetPasswordFormRef" :model="form" :rules="rules" style="height: 100px">
        <transition mode="out-in" name="slide-left">
            <div v-if="active === 1">
                <el-form-item prop="email">
                    <el-input v-model="form.email" placeholder="example@example.com" clearable />
                </el-form-item>
                <el-form-item prop="code">
                    <el-row :gutter="5" style="width: 100%; margin-left: 0; margin-right: 0">
                        <el-col :span="18">
                            <el-input v-model="form.code" :placeholder="$t('authentication.code')" />
                        </el-col>
                        <el-col :span="6" style="padding-right: 0">
                            <el-button style="width: 100%" :disabled="disabled" @click="handleSend">
                                {{ $t('common.send') }}<span v-if="disabled"> ({{ time }})</span>
                            </el-button>
                        </el-col>
                    </el-row>
                </el-form-item>
            </div>
            <div v-else-if="active === 2">
                <el-form-item prop="password">
                    <el-input v-model="form.password" :placeholder="$t('authentication.passwordStrength')" clearable show-password />
                </el-form-item>
                <VPasswordStrength :password="form.password" />
            </div>
            <div v-else>
                <el-result icon="success" :title="$t('authentication.resetPasswordSuccess')" style="--el-result-padding: 0" />
            </div>
        </transition>
    </el-form>
</template>

<style scoped></style>
